<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery锚点带动画跳转特效</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<link href="css/christmas.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

$(document).ready(function() {
	
	 
	//锚点位置
	$(window).on('load resize',function(){
		l = $('#main').offset().left;
		w = $('#main').width();
		var curId = "";
		$('#tbox').css('left',(l + w + 10) + 'px');
		$('#tbox').css('bottom',100 + 'px');	
	})
	
	//点击锚点定位到指定元素
	$(".taoba").click(function(e) {
		var index=$(this).attr('data-id');
		$("html,body").stop().animate({scrollTop: $('#'+index).offset().top}, 1000);
    });
	
	//定位到锚点位置时，锚点背景改变
	$(document).on('scroll',function(){
		var top = $(document).scrollTop();       
		var items = $("#main").find(".page");
		var menu = $("#tbox"); 
		
		items.each(function(){
			var m = $(this);                        
			var itemsTop = m.offset().top;   
			if(top >= itemsTop-100){
				curId = m.attr("id");
			}else{
				return false;
			}
		});
		var curLink = menu.find(".taoba");
		if( curId){
			$('#tbox').show(); 
	        $('#tbox2').hide();
			curLink.removeClass("on");
			menu.find( "[data-id=" + curId + "]" ).addClass("on");
		}	
	})

	 
	//返回顶部
	$('#gotop').click(function(){ 
        $('body,html').animate({
            scrollTop: 0
        },
        800);
        return false;  
    })
	
});
	
</script>
</head>
<body>

<!--各个楼层-->
<div id="main">

    <div id="p1" class="page">一楼电子产品</div>
    <div class="mainpage"></div>
      
    
    <div id="p2" class="page">二楼日用品</div>
    <div class="mainpage"></div>
      
    
    <div id="p3" class="page">三楼衣装</div>
    <div class="mainpage"></div>
      
    
    <div id="p4" class="page">四楼图书</div>
    <div class="mainpage"></div>
      
      
    <div id="p5" class="page">五楼礼品</div>
    <div class="mainpage"></div>
    
</div>
<!--各个楼层end-->


<!--锚点-->  
<div id="tbox">
    <a class="taoba on" data-id="p1">1F</a>
    <a class="taoba" data-id="p2">2F</a>
    <a class="taoba" data-id="p3">3F</a>
    <a class="taoba" data-id="p4">4F</a>
    <a class="taoba" data-id="p5">5F</a>
    <a id="gotop" title="回到顶部">↑</a>
</div>
<!--锚点end-->

<!--测试代码主要是看第五层效果-->
<div style="height:300px;">
</div>
<!--测试代码主要是看第五层效果end-->

</body>
</html>
